<script lang="jsx" setup>
import { ref } from 'vue';
import { getMoldDataStatisticsAll } from '@/service/api/modules/workwear/mold-data-statistics';
import DayCharts from './modules/day-charts.vue';
import MonthCharts from './modules/month-charts.vue';
import WorkloadCharts from './modules/workload-charts.vue';
import StatusCharts from './modules/status-charts.vue';

const generalViewData = ref({
  all: 0,
  stateOk: 0,
  stateSoonNg: 0,
  // 报废
  stateNg: 0,
  stateStop: 0,
  stateOut: 0
});

const generalViewList = [
  {
    name: '模具总数',
    key: 'all',
    icon: 'icon-mojuguanli',
    iconBackground: '#50cbfb'
  },
  {
    name: '正常数量',
    key: 'stateOk',
    icon: 'icon-zhengchang',
    iconBackground: '#7FFF00'
  },
  {
    name: '报废预警',
    key: 'stateSoonNg',
    icon: 'icon-yujing',
    iconBackground: '#CDCD00'
  },
  {
    name: '报废数量',
    key: 'stateNg',
    icon: 'icon-baofei',
    iconBackground: '#FF0000'
  },
  {
    name: '暂停数量',
    key: 'stateStop',
    icon: 'icon-zanting',
    iconBackground: 'rgb(247, 109, 109)'
  },
  {
    name: '调出数量',
    key: 'stateOut',
    icon: 'icon-tiaochu',
    iconBackground: '#EEAD0E'
  }
];

function getMoldData() {
  getMoldDataStatisticsAll().then(({ data, error }) => {
    if (!error) {
      console.log(data);
      generalViewData.value = data;
    }
  });
}

getMoldData();
</script>

<template>
  <div class="mold-data-statistics h-full w-full">
    <ARow class="general-view" :gutter="20">
      <ACol v-for="item in generalViewList" :key="item.key" :span="4">
        <div class="view-item">
          <div class="data">
            <div class="label text-16px color-#6638 font-bold">{{ item.name }}</div>
            <div class="value">
              <CountTo :start-value="0" :end-value="generalViewData[item.key]" class="text-30px dark:text-dark" />
            </div>
          </div>
          <div class="icon" :style="{ background: item.iconBackground }">
            <span class="iconfont font" :class="item.icon"></span>
          </div>
        </div>
      </ACol>
    </ARow>

    <ARow class="charts pt-15px" :gutter="20">
      <ACol :span="15" class="h-full">
        <div class="day-charts mb-1% h-49% w-full">
          <DayCharts />
        </div>
        <div class="month-charts h-49% w-full">
          <MonthCharts />
        </div>
      </ACol>
      <ACol :span="9" class="h-full">
        <div class="workload-charts mb-1.5% h-49% w-full">
          <WorkloadCharts />
        </div>
        <div class="month-charts h-49% w-full">
          <StatusCharts />
        </div>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.mold-data-statistics {
  padding: 15px;
  padding-bottom: 0;
  .general-view {
    .view-item {
      // width: calc(25% - 30px);
      width: 100%;
      display: flex;
      gap: 10px;
      height: 130px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border: 1px solid #f0f0f0;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      border-radius: 8px;

      .data {
        width: calc(100% - 60px);
      }

      .icon {
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background: #50cbfb;
        .font {
          font-size: 48px;
          color: #fff;
        }
      }
    }
  }

  .charts {
    height: calc(100% - 150px);
    :deep(.ant-card) {
      height: 100%;
      .ant-card-body {
        padding: 15px;
      }
      .ant-card-body,
      .ant-spin-nested-loading,
      .ant-spin-container {
        height: 100%;
      }
    }
  }
}
</style>
